<template>
  <div id="bg-ellipse-wrapper" class="bg-ellipse-wrapper">
    <div class="bg-ellipse bg-ellipse-1" style="transform: translate3d(0px, 253.54px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-2" style="transform: translate3d(0px, 380.31px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-3" style="transform: translate3d(0px, 126.77px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-4" style="transform: translate3d(0px, 253.54px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-5" style="transform: translate3d(0px, 380.31px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-6" style="transform: translate3d(0px, 126.77px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-7" style="transform: translate3d(0px, 253.54px, 0px);"></div>
    <div class="bg-ellipse bg-ellipse-8" style="transform: translate3d(0px, 380.31px, 0px);"></div>
  </div>
</template>
<script lang="ts" setup>
window.addEventListener("scroll", (res) => {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  task(scrollTop);
});
function task(i) {
  setTimeout(function () {
    document.getElementById("bg-ellipse-wrapper").style.top =
      i / 5 + "px";
  }, 300);
}
</script>
<style lang="scss" scoped>
.bg-ellipse-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

.bg-ellipse-1 {
  right: -10rem;
  top: 20rem;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-85.35deg);
  -ms-transform: rotate(-85.35deg);
  transform: rotate(-85.35deg);
}

.bg-ellipse-2 {
  left: -20rem;
  top: 50rem;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-21.57deg);
  -ms-transform: rotate(-21.57deg);
  transform: rotate(-21.57deg);
}

.bg-ellipse-3 {
  right: -10rem;
  top: 110rem;
  background: linear-gradient(
    44.11deg,
    rgba(245, 198, 39, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.85) rotate(-63.95deg);
  -ms-transform: scale(0.85) rotate(-63.95deg);
  transform: scale(0.85) rotate(-63.95deg);
}

.bg-ellipse-4 {
  left: -20rem;
  top: 120rem;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-29.1deg);
  -ms-transform: rotate(-29.1deg);
  transform: rotate(-29.1deg);
}

.bg-ellipse-5 {
  right: -10rem;
  top: 160rem;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-70.95deg);
  -ms-transform: rotate(-70.95deg);
  transform: rotate(-70.95deg);
}

.bg-ellipse-6 {
  left: -20rem;
  top: 200rem;
  background: linear-gradient(
    44.11deg,
    rgba(245, 198, 39, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.95) rotate(-21.57deg);
  -ms-transform: scale(0.95) rotate(-21.57deg);
  transform: scale(0.95) rotate(-21.57deg);
}

.bg-ellipse-7 {
  right: -10rem;
  top: 240rem;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.85) rotate(-93.95deg);
  -ms-transform: scale(0.85) rotate(-93.95deg);
  transform: scale(0.85) rotate(-93.95deg);
}

.bg-ellipse-8 {
  left: -20rem;
  top: 280rem;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-21.95deg);
  -ms-transform: rotate(-21.95deg);
  transform: rotate(-21.95deg);
}
.bg-ellipse {
  position: absolute;
  width: 45rem;
  height: 45rem;
  border-radius: 51%;
  z-index: -1;
  -webkit-transition: -webkit-transform 0.3s linear;
  -webkit-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
@media (max-width: 750px) {
  .bg-ellipse-1 {
    width: 20rem;
    height: 20rem;
    right: -5rem;
    top: -10rem;
    background: linear-gradient(
      44.4deg,
      rgba(245, 198, 39, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-101.89deg);
    -ms-transform: rotate(-101.89deg);
    transform: rotate(-101.89deg);
  }

  .bg-ellipse-2 {
    width: 20rem;
    height: 20rem;
    left: -5rem;
    top: 4rem;
    background: linear-gradient(
      44.11deg,
      rgba(124, 177, 235, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-21.57deg);
    -ms-transform: rotate(-21.57deg);
    transform: rotate(-21.57deg);
  }

  .bg-ellipse-3 {
    width: 20rem;
    height: 20rem;
    right: -5rem;
    top: 40rem;
    background: linear-gradient(
      44.11deg,
      rgba(139, 233, 223, 0.75) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-85.35deg);
    -ms-transform: rotate(-85.35deg);
    transform: rotate(-85.35deg);
  }

  .bg-ellipse-4 {
    width: 20rem;
    height: 20rem;
    left: -5rem;
    top: 55rem;
    background: linear-gradient(
      44.11deg,
      rgba(245, 198, 39, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-43.68deg);
    -ms-transform: rotate(-43.68deg);
    transform: rotate(-43.68deg);
  }

  .bg-ellipse-5 {
    width: 20rem;
    height: 20rem;
    right: -5rem;
    top: 70rem;
    background: linear-gradient(
      44.11deg,
      rgba(124, 177, 235, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-91.57deg);
    -ms-transform: rotate(-91.57deg);
    transform: rotate(-91.57deg);
  }

  .bg-ellipse-6 {
    width: 20rem;
    height: 20rem;
    left: -5rem;
    top: 100rem;
    background: linear-gradient(
      44.11deg,
      rgba(139, 233, 223, 0.75) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-25.35deg);
    -ms-transform: rotate(-25.35deg);
    transform: rotate(-25.35deg);
  }

  .bg-ellipse-7 {
    width: 20rem;
    height: 20rem;
    right: -5rem;
    top: 110rem;
    background: linear-gradient(
      44.11deg,
      rgba(245, 198, 39, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-63.68deg);
    -ms-transform: rotate(-63.68deg);
    transform: rotate(-63.68deg);
  }

  .bg-ellipse-8 {
    width: 20rem;
    height: 20rem;
    left: -5rem;
    top: 125rem;
    background: linear-gradient(
      44.11deg,
      rgba(124, 177, 235, 0.6) 8.94%,
      rgba(255, 255, 255, 0) 86.73%
    );
    -webkit-transform: rotate(-21.57deg);
    -ms-transform: rotate(-21.57deg);
    transform: rotate(-21.57deg);
  }
}
</style>